
gridCfg = {
  $num: 4
  $spacing: 20px
  $type: 'grid'
}



ss-func-grid($class='.ss-row', $spacing = 10px)
  {$class}
    @extends $flex-wrap
    --gap: 0
    margin-left: calc(var(--gap) * -1)
    margin-right: @margin-left
    margin-top: calc(var(--gap) * -2)
    &.space-between
      justify-content: space-between
    [class*=ss-col]
      box-sizing: border-box;
      padding-left: var(--gap)
      padding-right: @padding-left
      margin-top: calc(var(--gap) * 2)
    //一行分为24等份
    for value in 1..24
      .ss-col-{value}
        width: round((value/24) * 100%, 5)
      .ss-col-offset-{value}
        margin-left: round((value/24) * 100%, 5)
    @media screen and (max-width: 768px) 
      for value in 1..24
        .ss-col-md-{value}
          width: round((value/24) * 100%, 5)
        .ss-col-md-offset-{value}
          margin-left: round((value/24) * 100%, 5)
    



// ss-func-grid-x($class='.ss-row-custom', $config = false)
//   cfg = merge({}, gridCfg, $config)
//   {$class}
//     @extends $flex-wrap
//     .ss-col
//       if (cfg.$type == 'grid')
//         box-sizing: border-box
//         width: "calc(100% / %s)" % cfg.$num
//         padding: cfg.$spacing
//       else 
//         flex: 1
//         margin: cfg.$spacing
